 <template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="20" :xs="24">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="巡检名" prop="userName">
            <el-input
              v-model="queryParams.pollingName"
              :placeholder="$t('login.prompt1')"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item :label="$t('visiting.phoneNum')" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              :placeholder="$t('visiting.inputPhoneNum')"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
          <el-form-item label="巡检日期">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('operating.StartTime')"
              :end-placeholder="$t('operating.EndTime')"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >{{ $t("operating.search") }}</el-button
            >
            <!-- <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >{{ $t('operating.reset') }}</el-button> -->
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="analysisList" style="width: 100%">
      <el-table-column prop="pollingName" label="巡检名" width="180">
      </el-table-column>
      <el-table-column prop="fenceName" label="围栏名" width="180">
      </el-table-column>
      <el-table-column prop="pollingDay" label="巡检日期" width="180">
      </el-table-column>
      <el-table-column prop="pollingPlanNum" label="巡检次数" width="180">
      </el-table-column>
      <el-table-column prop="practicalNum" label="实际次数" width="180">
      </el-table-column>
      <el-table-column prop="completed" label="完成度"> </el-table-column>
      <!-- <el-table-column prop="completed" >
          <template slot-scope="scope">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.completed"></el-progress>
          </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="queryAnalysis"
    />
  </div>
</template>

  <script>
import { analysisInspect } from "@/api/cy.js";

export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pollingName: undefined,
        // departmentId: undefined,
      },
      total: 0,
      analysisList: [],
      dateRange: [],
    };
  },
  mounted() {
    this.queryAnalysis();
  },
  methods: {
    queryAnalysis() {
        console.log('笑死了',this.addDateRange(this.queryParams, this.dateRange))
      analysisInspect(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.analysisList = res.rows;
          this.total = res.total;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryAnalysis();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>